import {Component, Input, Inject, AfterContentInit, ViewEncapsulation} from '@angular/core';
import {DOCUMENT} from "@angular/platform-browser";
import {ImageServeService} from "../../../service/image/image-serve.service";

@Component({
  selector: 'seed-img',
  templateUrl: './img.component.html',
  styleUrls: ['./img.component.scss'],
  encapsulation: ViewEncapsulation.None,
  host: {id: 'seed-lazyload-img'}
})

export class ImgComponent implements AfterContentInit {
  public _lazyLoadImg: string;
  public _defaultImg: string;
  public _background: boolean;
  public scrollContainer: any;
  public arr: Array<string>;

  @Input()
  set defaultImg(sub: string) {
    this._defaultImg = this.arr[sub];
  }

  get defaultImg() {
    return this._defaultImg;
  }

  @Input()
  set lazyLoadImg(src: string) {
    this._lazyLoadImg = src;
  }

  get lazyLoadImg() {
    return this._lazyLoadImg;
  }

  @Input()
  set background(states: boolean) {
    this._background = states;
  }

  get background(): boolean {
    return this._background;
  }

  constructor(@Inject(DOCUMENT) private document,
              private imgService: ImageServeService) {
    this.arr = [];
    this.arr['small'] = imgService.getSmallArticleImgHolder();
    this.arr['middle'] = imgService.getMiddleArticleImgHolder();
    this.arr['long'] = imgService.getLongArticleImgHolder();
    this.arr['longer'] = imgService.getLongerArticleImgHolder();
    this.arr['vertical'] = imgService.getVerticalPlaceholderImg();

    this.defaultImg = this.lazyLoadImg = 'small';
    this.background = false;
  }

  ngAfterContentInit() {
    this.scrollContainer = this.document.querySelector('#seed-scroll-content');
  }

}
